<template>
    <div class="setupPage">
        <div class="item">
            <div class="label">当前账号</div>
            <div class="flex alighn_center" style="margin-top: 15px;">
                <div class="value">{{ accountInfo.userName }}</div>
                <div class="btn" @click="dialogTableVisible10 = true">变更手机号</div>
                <div class="btn" @click="dialogTableVisible = true">修改密码</div>
            </div>   
        </div>
        <div class="item margin30">
            <div class="label">用户ID</div>
            <div class="flex alighn_center" style="margin-top: 15px;">
                <div class="value">{{ accountInfo.userId }}</div>
            </div>   
        </div>
        <div class="item margin30" v-if="accountInfo.parentId">
            <div class="label">关联主账号</div>
            <div class="flex alighn_center" style="margin-top: 15px;">
                <div class="value">{{ accountInfo.parentName }}</div>
                <div class="btn" @click="disBand">解除关联</div>
            </div>
        </div>

        <!-- 修改密码 -->
        <el-dialog title="修改密码" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="20vh" @close="close">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">原密码</div>
                    <el-input v-model="oldPwd" placeholder="请输入原密码" style="margin-top: 15px;"></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">新登录密码</div>
                    <el-input v-model="pwd" placeholder="请设置新登录密码" style="margin-top: 15px;" type="password"></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">确认登录密码</div>
                    <el-input v-model="re_pwd" placeholder="请确认登录密码" style="margin-top: 15px;" type="password"></el-input>
                </div>
                <div class="btn margin40" @click="changePwd">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span>确认</span>
                </div>
            </div>
        </el-dialog>

        <!-- 变更手机号 -->
        <el-dialog title="变更手机号" :visible.sync="dialogTableVisible10" :show-close="true" :center="true" top="20vh" @close="close">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">当前手机号</div>
                    <el-input v-model="accountInfo.userName" style="margin-top: 15px;" disabled></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">新手机号</div>
                    <el-input v-model="phone" placeholder="请输入新手机号" style="margin-top: 15px;"></el-input>
                </div>

                <div class="inpVue margin30">
                    <div class="label">发送</div>
                    <div class="flex align_center" style="margin-top: 15px;">
                        <el-input v-model="code" placeholder="请输入新手机号验证码" style="flex: 1;"></el-input>
                        <div class="sendCode" @click="sendCode">{{ text }}</div>
                    </div>
                    
                </div>

                <div class="btn margin40" @click="changePhone">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span v-else>确认</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { toast } from '@/common/tools'
import { mobile } from "@/common/verification.js"
export default {
    data(){
        return {
            accountInfo: {
                userName: "",
                parentName: "",
                userId: ""
            },
            dialogTableVisible: false,
            dialogTableVisible10: false,
            oldPwd: "",
            pwd: "",
            re_pwd: "",
            loading: false,
            phone: "",
            text: "发送",
            code: ""
        }
    },
    async created(){
        await this.init()
    },
    methods: {
        close(){
            this.dialogTableVisible = false
            this.dialogTableVisible10 = false
            this.loading = false
            this.oldPwd = ""
            this.pwd  = ""
            this.re_pwd = ""
            this.code = ""
        },

        async init(){
            let res = await this.$post("/front/child/userPackageInfo")
            if(res.data.code===0) {
                console.log(res)
                this.accountInfo = res.data.obj
            }
        },

        // 修改登录密码
        async changePwd(){
            if(this.loading) return
            this.loading = true
            let res = await this.$post("/front/user/changePwd", {
                pwd: this.oldPwd,
                newPwd: this.pwd,
                reNewPwd: this.re_pwd
            })
            if(res.data.code===0) {
                toast(0, "修改成功, 请重新登录")
                this.loading = false
                this.close()
                this.$router.push("login")
                window.localStorage.removeItem("ai_token")
                window.localStorage.removeItem("user")
                this.$store.state.statusRandom = -1    
            }else {
                toast(1, res.data.msg)
                this.loading = false
            }
        },

        // 变更手机号
        changePhone(){
            if(!this.phone) return toast(0, "请输入新手机号")
            if(!this.code) return toast(0, "请输入验证码")
            if(this.loading) return
            this.loading = true
            this.$post("", {
                ids: item.id
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "变更成功, 请重新登录")
                    this.close()
                    this.loading = false
                    this.$router.push("login")
                    window.localStorage.removeItem("ai_token")
                    window.localStorage.removeItem("user")
                    this.$store.state.statusRandom = -1  
                } else {
                    this.loading = false
                    toast(1, res.data.msg)
                }
            })
        },

        // 解除关联
        disBand(){
            this.$alert(`确认解除与${this.accountInfo.parentName}的绑定关系?`, '解除关联', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("", {
                            ids: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "解除成功") 
                                this.init()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

                    // 发送验证码
        async sendCode(){
            if(this.text != '发送') return toast(1, this.text + "后可重新获取")
            if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
            let res = await this.$post("/front/authCode/sendCode", {
                account: this.phone
            })
            if(res.data.code===0) {
                toast(0, "发送成功")
                let count = 60
                this.text = `${count}s`
                let timer = setInterval(()=>{
                count--;
                this.text = `${count}s`;
                    if (count === 0) {
                        clearInterval(timer);
                        this.text = '发送';
                    }
                }, 1000)
            }else{
                    toast(1, res.data.msg)
            }
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px;
}
:deep(.el-dialog__body) {
    padding: 30px;
}
.dialogVue {
    width: 100%;
    .inpVue {
        width: 100%;
        .label {
            width: 100px;
            color: #666;
            font-weight: 600;
            font-size: 12px;
        }
        .sendCode {
            color: #0147fd;
            cursor: pointer;
            padding-left: 20px;
        }
    }
    .btn {
        width: 320px;
        height: 42px;
        border-radius: 4px;
        line-height: 42px;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
        span {
            color: #fff;
        }
    }
}
.setupPage {
    width: 100%;
    height: 100%;
    padding: 20px;
    .item {
        width: 100%;
        .label {
            width: 100px;
            color: #666;
            font-weight: 600;
            font-size: 12px;
        }
        .value {
            width: 220px;
            height: 42px;
            line-height: 42px;
            padding-left: 10px;
            color: #333;
            font-weight: 600;
            border: 1px solid #f5f5f5;
            border-radius: 5px;
        }
        .btn {
            width: 100px;
            height: 42px;
            border-radius: 5px;
            line-height: 42px;
            text-align: center;
            background: #0147fd;
            color: #fff;
            cursor: pointer;
            margin-left: 15px;
        }
    }       
}
</style>